<template>
  <div class="">
    <!-- beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured -->

    <!-- create和mounted的区别 
mounted的时候可以拿到dom节点来用但是created的时候节点还未渲染 -->

    <button @click="num++">num++</button>
    <h1 id="box">{{ num }}</h1>

    <div class="wrap">
      <p>111</p>
      <p>222</p>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onUpdated, onBeforeUpdate } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      num: 0,
    });

    onBeforeUpdate(() => {
      console.log(data.num);
      console.log(document.getElementById("box").innerHTML);
    });
    onUpdated(() => {
      console.log(data.num);
      console.log(document.getElementById("box").innerHTML);
    });

    //vue3的生命周期函数要先引入 作为一个函数使用 接收一个回调函数作为参数 数据更新就会自动调用 但是其实更新阶段的两个钩子函数 更新的视图

    return { ...toRefs(data) };
  },
};
</script>

<style lang="scss">
.wrap {
  p {
    float: left;
  }
}
.wrap::after {
  display: block;
  content: "";
  clear: both; //是专门用来清浮动的一个样式
}
//after清浮动
</style>
